<template>
	<view class="">
		<!-- 商品轮播图 -->
		<u-swiper :list="goods_image" radius='0' indicator indicatorMode="line" circular imgMode="widthFix" height="700rpx"></u-swiper>
		<!-- 店铺信息 -->
		<view class="mb-20 bg-fff rd-16 overflow-hidden">
			<view class="flex-between-center p-20">
				<view class="flex-y-center">
					<view class="w-100 h-100 bg-primary rd-8"></view>
					<view class="ml-10">
						<view class="flex-y-center c-333 fs-30 mb-10">{{storeinfo.name}} <span class="rd-6 fs-22 bg-warning-2 color-warning px-10 py-4 ml-10">{{storeinfo.tag}}</span></view>
						<view class="flex-y-center c-999">
							已购{{storeinfo.sailnum}}件
							<u-rate count="5" active-color="#FBD068" inactive-color="#FBD068" :value="storeinfo.rate" allowHalf readonly></u-rate>
						</view>
					</view>
				</view>
				<view class="border-info-8 rd-8 px-20 py-10">
					分享店铺
				</view>
			</view>			
			<view class="bg-warning-1 flex-between-center p-20">
				<view class="fs-30 fw-600 c-666">店铺保障</view>
				<view class="color-warning fs-22">官方正品·免费领用·包邮到家</view>
			</view>			
		</view>
		
		<!-- 商品详情 -->
		<view class="py-20 bg-fff pb-50">
			<u-tabs :current="tabcurrent" itemStyle="width:28%;height:35px;" :list="tabs" @click="clicktab" :scrollable="false"></u-tabs>
			<view class="py-20">
				<!-- 产品详情内容 -->
				<view v-if="tabcurrent==0">
					<image class="w-100v" :src="item" v-for="(item,index) in detail.photoLists_text" mode="widthFix"></image>
				</view>
				<!-- 相关资料 -->
				<view v-if="tabcurrent==1" class="p-20">
					<view class="flex-y-center py-20 u-border-bottom" v-for="(item,index) in ziliao" :key="index">
						<view class="fs-28">{{item.title}}</view>
						<u-parse class="pl-20 c-999 text-nowrap" :content="item.intro"></u-parse>
					</view>
					
				</view>
				
				<!-- 常见问题 -->
				<view v-if="tabcurrent==2" class="p-20">
					<u-cell-group>
						<u-cell title="我们的推广模式合法吗？" :isLink="true" ></u-cell>
						<u-cell title="我们的推广逻辑是什么养的？" :isLink="true" ></u-cell>
						<u-cell title="怎么实现直推10人快速裂变为成百上千人？" :isLink="true" ></u-cell>
						<u-cell title="推广的收益有哪些？" :isLink="true" ></u-cell>
						<u-cell title="怎么避免下级贡献的前两个人不是僵尸账号？" :isLink="true" ></u-cell>
					</u-cell-group>
				</view>
			</view>
			
		</view>
		
		<view class="placeholder pd-safe"></view>
		<view class="fixed left-0 right-0 bottom-0 pd-safe bg-fff shadow-s p-30 bottombtn overflow-hidden">
			<view class="shadow_button" @click="showsubox=true">免费领取</view>
		</view>
		
		
		
		<!-- 领取填写弹窗 -->
		<u-popup :show="showsubox" @close="showsubox=false" mode="bottom" bgColor="transparent" closeable>
			<view class="bg-fff p-20 popbox">
				<view class="popboxscroll">
					
					<view class="bg-info-3 rd-20 p-20 lh-40 my-20">
						<view class="fs-28 my-10 flex-y-center"> <text class="siconfont icon-24gl-network"></text>入网信息</view>
						<u--input class="bg-fff h-80 my-20" placeholder="请输入姓名" border="none">
							<u--text class="px-20" text="姓名" slot="prefix"></u--text>
						</u--input>
						
						<u--input class="bg-fff h-80 my-20" placeholder="请输入身份证号码" border="none">
							<u--text class="px-20" text="身份证号" slot="prefix"></u--text>
						</u--input>
					</view>
					
					<view class="bg-info-3 rd-20 p-20 lh-40 my-20">
						<view class="fs-28 my-10 flex-y-center"> <text class="siconfont icon-gouwudaidaizishangcheng"></text>收货信息</view>
						<u--input class="bg-fff h-80 my-20" placeholder="请输入收货手机号" border="none">
							<u--text class="px-20" text="联系方式" slot="prefix"></u--text>
						</u--input>
						
						<u--input class="bg-fff h-80 my-20" placeholder="请输入身份证号码" border="none">
							<u--text class="px-20" text="所在地区" slot="prefix"></u--text>
						</u--input>
					</view>
					
					
					<view class="bg-info-3 rd-20 p-20 lh-40 my-20">
						<view class="fs-28 my-10 flex-y-center"> <text class="siconfont icon-tupian"></text>上传图片</view>
						
						<view class="c-999 my-20">
							<view class="c-666 my-20">身份证正面照：</view>
							<view class="c-999 text-center flex-around-center mb-10">
								<view class="bg-fff rd-16 w-200 h-200 flex-col flex-center">
									<view class="siconfont icon-xiangji fs-80 mb-20"></view>
									<view class="fs-22">拍照或上传</view>
								</view>
								<view class="fs-32 c-fff flex-col flex-center bg-info-6 w-300 h-200 rd-8">
									示例图
								</view>
							</view>
							<view>
								注：证件四角边绿空隙2厘米以上，手机横拍，照片消晰不模糊，无水印，无反光，无PS
							</view>
							<view class="c-666 my-20">身份证国徽照：</view>
							<view class="c-999 text-center flex-around-center mb-10">
								<view class="bg-fff rd-16 w-200 h-200 flex-col flex-center">
									<view class="siconfont icon-xiangji fs-80 mb-20"></view>
									<view class="fs-22">拍照或上传</view>
								</view>
								<view class="fs-32 c-fff flex-col flex-center bg-info-6 w-300 h-200 rd-8">
									示例图
								</view>
							</view>
							<view>
								注：证件四角边绿空隙2厘米以上，手机横拍，照片消晰不模糊，无水印，无反光，无PS
							</view>
							<view class="c-666 my-20">本人半身照：</view>
							<view class="c-999 text-center flex-around-center mb-10">
								<view class="bg-fff rd-16 w-200 h-200 flex-col flex-center">
									<view class="siconfont icon-xiangji fs-80 mb-20"></view>
									<view class="fs-22">拍照或上传</view>
								</view>
								<view class="fs-32 c-fff flex-col flex-center bg-info-6 w-300 h-200 rd-8">
									示例图
								</view>
							</view>
							<view>
								注：无需手持身份证，胸部以上。露出双肩，人像面部比例不低于1/3，无水印，无反光，无PS请上传真实环境拍摄的免冠照，不要上传证件照
							</view>
							<view class="color-error">注：上传三照标题下面红色字：运营商要求上传三照才审核发货，请按要求正确上传</view>
						</view>
					</view>
					
					<view class="mt-40">
						<view class="flex-y-center">
							<text class="siconfont mr-20" :class="1==1?'icon-dui color-primary':'icon-danxuan_weixuanzhong'" @click="changeBtn"></text><text>请阅读以下协议并勾选</text>
						</view>
						
						<view class="lh-50 ml-40 mt-10">							
							
							<view class="color-primary">
								<view>《个人信息收集、使用同意函》</view>
								<view>《关于客户个人信息收集、使用及保护的公告》</view>
								<view>《合规使用手机卡告知书》</view>
								<view>《中国联通通信客户入网服务协议》</view>
							</view>
						</view>
					</view>
					
					<view class="shadow_button m-20 my-40">立即领取，包邮到家</view>
				</view>
				
				
			</view>
		</u-popup>
		
		<!-- 地区选择 -->
		<!-- <AreaSelect></AreaSelect> -->
	</view>
</template>

<script>
	import AreaSelect from "@/components/areaSelect.vue"
	export default {
		components:{
			AreaSelect
		},
		data() {
			return {
				id:'',
				goods_image:[],
				detail:{},
				ziliao:[],
				storeinfo:{
					name:'流量卡店铺',
					tag:'金牌店铺',
					sailnum:2051,
					rate:3.5
				},
				tabcurrent:0,
				tabs:[{
                    name: '产品详情'
                }, {
                    name: '相关资料'
                }, {
                    name: '常见问题'
                }],
				showsubox:false,
			};
		},
		onLoad(opt) {
			this.id=opt.id
			this.goodsInfo()
		},
		methods:{
			clicktab(item){
				this.tabcurrent = item.index;
			},
			// 获取商品信息
			goodsInfo(){
				var that = this
				that.$tips.showLoading('加载中')
				var params = {
					ids:that.id
				}
				that.$httpApi.purGoodsInfo(params).then((res)=>{
					that.$tips.hideLoading()
					console.log('商品详情结果：：：',res);
					if(res.code==1){
						that.goods_image.push(res.data.template_info.photos_text);
						that.detail = res.data.template_info
						that.ziliao = JSON.parse(res.data.template_info.basic_json)
						that.list=res.data.goods_smallimages
						that.goods_name=res.data.goods_name
						that.pay_money=res.data.pay_money
						that.wyy=res.data.wyy
						that.zhangfu=res.data.zhangfu
						that.goods_details_content=res.data.goods_details_content
					}
				})
			},
			// 立即购买
			submitBtn(){
				var obj = {
					id:this.id,
					img:this.goods_image,
					name:this.goods_name,
					pay_money:this.pay_money,
					wyy:this.wyy,
					zhangfu:this.zhangfu,
				}
				uni.navigateTo({
					url:'/pages/mall/order_first?info=' + JSON.stringify(obj)
				})
			},
		}
	}
</script>

<style lang="less">
	.bottombtn{
		border-top-left-radius:30rpx;
		border-top-right-radius:30rpx;
	}
	.placeholder{
		height:300rpx;
	}
	.popbox{
		border-radius: 20rpx 20rpx 0 0;
		padding-top: 80rpx;
		.popboxscroll{
			max-height: 80vh;
			overflow-y: scroll;
		}
		
	}
</style>
